<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="dataList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="订单编号"> </el-table-column>
      <el-table-column prop="WeChat" label="用户微信"> </el-table-column>
      <el-table-column prop="phone" label="会员手机"> </el-table-column>
      <el-table-column prop="CourseName" label="课程名称"></el-table-column>
      <el-table-column prop="money" label="订单金额(元)"></el-table-column>
      <el-table-column prop="status" label="订单状态" width="120">
        <template slot-scope="sl">
          <span v-if="sl.row.status == 0" style="color: red">待支付</span>
          <span v-if="sl.row.status == 1" style="color: block">已关闭</span>
          <span v-if="sl.row.status == 2" style="color: orange">待确认</span>
          <span v-if="sl.row.status == 3" style="color: green">学习中</span>
          <span v-if="sl.row.status == 4" style="color: red">已完成</span>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="提交时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作">
        <div class="button">
          <el-button type="primary" plain>查看</el-button>
          <el-button type="info" plain @click="deleteBtn">取消</el-button>
        </div>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["dataList"],
  data() {
    return {
      multipleSelection: [],
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.dataList);
    },
    deleteBtn() {
      console.log(scope.row);
      this.$emit("deleteBtn");
    },
  },
};
</script>

<style lang="less" scoped>
.button {
  display: flex;
}
</style>
